<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
</head>
<style>
    /* css 标签选择器*/
    div{
        position: absolute;/*绝对定位*/
        left: 40%;/*距离游览器左边*/
        top: 36%;/*距离游览器上边*/
        width: 500px;/* 宽度*/
        height: 278px;/* 高度*/
        border: 1px solid darkgreen;/*边框*/
        border-radius: 10px; /* 圆角*/
        background:  rgba(136,203,31,0.3);    /*a/ *背景颜色 */
        text-align: center; /*文本居中 */
    }

    .btn
    {
        margin-top: 8px; /*上的外边框*/
        left: 30px;
        width: 40px;
        height: 25px;
        font-size: 10px;
        background: lightpink;
        border-radius: 5px;

    }
</style>


<body style="background-image: url('./images/gz.jpg')" >

<div>
    <h2> 注册界面 </h2>
    账号：<input type="text" name="uername" placeholder="请输入注册账号"><br>
    密码：<input type="password" name="password" placeholder="请输入注册密码"><br>
    <!-- 男和女单选框 -->
    男<input type="radio" name="sex" value="men">
    女<input type="radio" name="sex" value="women"><br>

    <!-- select -->
    <label for="user-select">请选择用户类型：</label>
    <select name="usertype" id="user-select">
        <option value=" ">--- Please choose user type ---</option>
        <option value="business">商家</option>
        <option value="buyer">买家</option>
    </select>
    <br>
    <!--商户：<input type="checkbox" id="scales" name="scales" checked="checked"><br> --><!-- 复选框 -->
    <input type="button" id="btn1" value="注册" class="btn" >
    <input type="button" id="btn2" value="退出" class="btn">
</div>
</body>
<script>
    document.getElementById("btn1").onclick = function()
    {
        var username=document.getElementsByName("uername");
        var password=document.getElementsByName("password");
        if(!username[0].value)
        {
            alert("账号不为空");
            return;
        }
        if(!password[0].value)
        {
            alert("密码不为空");
            return;
        }

    }

    document.getElementById("btn2").onclick = function()
    {
        location.href="login.html";

    }
</script>
</html>